<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-sw-epistolize" @click="handleEpistolize()">写信</el-button>
			<el-divider direction="vertical"></el-divider>
			<el-radio-group size="small" v-model="activeName">
				<el-radio-button label="1">收件箱</el-radio-button>
				<el-radio-button label="2">发件箱</el-radio-button>
			</el-radio-group>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item>
					<el-input v-model="queryData.title" clearable placeholder="请输入标题" style="width: 180px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="table">
			<el-table size="medium" ref="table" :data="tableData" stripe>
				<el-table-column prop="title" label="标题" min-width="500"></el-table-column>
				<el-table-column :label="activeName === '1' ? '发送人' : '收件人'" min-width="208" show-overflow-tooltip>
					<template slot-scope="{ row }">{{ sendReceiveUser(row) }}</template>
				</el-table-column>
				<el-table-column prop="createTime" label="发送时间" min-width="160"></el-table-column>
				<el-table-column label="操作" width="155">
					<el-button-group slot-scope="{ row }">
						<el-button type="success" size="small" @click="handleViewLetter(row)">查看私信</el-button>
						<el-button type="danger" size="small" @click="handleDeleteLetter(row)">删除</el-button>
					</el-button-group>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<send-letter-form v-model="formDialog"></send-letter-form>
		<letter-detail v-model="detailDialog" :type="activeName" :data="letterData"></letter-detail>
	</sw-common-frame>
</template>

<script>
import { mapGetters } from 'vuex';
import letterDetail from './detail';
import sendLetterForm from './form';
import { getNoticePageList, getPrivateLetterData, deleteNotice, deletePrivateLetter } from '@/api/front/sysNotice';
export default {
	components: { sendLetterForm, letterDetail },
	data() {
		return {
			loading: false,
			activeName: '1',
			dataCount: 0,
			tableData: [],
			queryData: { page: 1, limit: 15 },
			formDialog: false,
			detailDialog: false,
			letterData: {}
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		tableFunction() {
			if (this.activeName === '1') {
				return eval(getPrivateLetterData);
			} else if (this.activeName === '2') {
				return eval(getNoticePageList);
			}
		},
		sendReceiveUser() {
			return (data) => {
				if (this.activeName === '1') {
					return data.sendUser?.userName;
				} else if (this.activeName === '2') {
					let receiveUser = data.receiveUserList || [];
					let receiveUsers = receiveUser.filter((n) => !!n);
					return receiveUsers.map((item) => item.userName).join('、');
				}
			};
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//获取表格数据
		async getTableData() {
			let params = { ...this.queryData, type: '2', createBy: this.userInfo.id };
			let result = await this.tableFunction(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
				console.log(this.tableData);
			}
		},

		//查询表格数据
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//写信
		handleEpistolize() {
			this.formDialog = true;
		},

		//查看私信
		handleViewLetter(data) {
			this.letterData = data;
			this.detailDialog = true;
		},

		//删除私信
		handleDeleteLetter(data) {
			let that = this;
			this.$confirm('是否删除该私信？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						if (that.activeName === '1') {
							await that.deleteLetterRequest(data);
						} else if (that.activeName === '2') {
							await that.deleteDataRequest(data);
						}
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除数据请求
		async deleteDataRequest(data) {
			let result = await deleteNotice(data.id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除信件成功');
				this.queryTableData();
			}
		},

		//删除私信请求
		async deleteLetterRequest(data) {
			let result = await deletePrivateLetter(data.id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除私信成功');
				this.queryTableData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.user_message_wrapper {
	.button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px;
	}
}
</style>
